<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{width: 100px; height: 100px; background-color: red;position: absolute;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1');

		document.onkeydown = function (ev){
			var ev = ev || event;
			switch(ev.keyCode){
				case 37:
					go(oDiv, 'left', -10);
					break;
				case 38:
					go(oDiv, 'top', -10);
					break;
				case 39:
					go(oDiv, 'left', 10);
					break;
				case 40:
					go(oDiv, 'top', 10);
					break;
			}
		}

		document.onkeyup = function (ev){
			var ev = ev || event;
			switch(ev.keyCode){
				case 37:
					clearInterval(oDiv.timer);
					break;
				case 38:
					clearInterval(oDiv.timer);
					break;
				case 39:
					clearInterval(oDiv.timer);
					break;
				case 40:
					clearInterval(oDiv.timer);
					break;
			}
		}
	}
	function go(obj, attr, iSpeed){
		clearInterval(obj.timer);

		obj.timer = setInterval(function(){
			var iCur = parseInt(getStyle(obj, attr));
			obj.style[attr] = iCur + iSpeed + 'px';
		},30);
	}

	function getStyle(obj, attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>